<script setup>
  import { ref } from 'vue'
  const title = ref('')

  const emit = defineEmits()

  const onEnter = () => {
    // console.log(111)
    if(!title.value) return alert('计划输入框不能为空!')
    emit('add-todo', title.value)
    title.value = ''
  }
</script>

<template>
  <header class="header">
    <h1>⽐特⼈的记事本</h1>
    <input 
      v-model.trim="title"
      @keydown.enter="onEnter"
      class="new-todo" 
      placeholder="What needs to be finished?" 
      autofocus 
    />
  </header>
</template>